<template>
	<view>
		<navigator url="../login/login">
		<view class="user_top" >
			<view class="user_top_icon iconfont icon-xiaoxi"></view>
			<image src="https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605882179171.jpg" mode=""></image>
			<view class="user_info">
				<view class="flex flex-align-items">
					<image class="heard_image" src="https://sass-gmall.oss-cn-hangzhou.aliyuncs.com/images/1605882176101.jpg" mode=""></image>
					<view class="nick_name">吴永杰</view>
				</view>
				<view class="jifen iconfont icon-huangguan">
					会员积分 120
				</view>
			</view>
		</view>
		</navigator>
		<linex></linex>
		<view class="flex justify-between padding-x-20 flex-align-items padding-y-20" style="border-bottom: 1rpx solid #F1F1F1;">
			<view class="font-size-30 font-weight-700">
				我的订单
			</view>
			<view class="text-color-h" @tap="toOrder(0)">
				全部订单 <text class="iconfont icon-you"></text>
			</view>
		</view>
		<view class="order_status_tab">
			<view class="order_status" @tap="toOrder(1)">
				<view class="iconfont icon-wallet_icon"></view>
				<view >待付款</view>
			</view>
			<view class="order_status" @tap="toOrder(2)">
				<view class="iconfont icon-buoumaotubiao46"></view>
				<view class="">待发货</view>
			</view> 
			<view class="order_status" @tap="toOrder(3)">
				<view class="iconfont icon-daishouhuo"></view>
				<view class="">待收货</view>
			</view>
			<view class="order_status" @tap="toOrder(4)">
				<view class="iconfont icon-pinglun1"></view>
				<view class="">待评价</view>
			</view>
			
		</view>
		<linex></linex>
		<view class="list-li">
			<view class="list-item" v-for="(item,index) in list" @tap="userSet">
				<view class="">
					<text :class="'iconfont '+item.icon  " :style="'color:'+item.color"></text>
					<text class="title">{{item.title}}</text>
				</view>
				<view class="iconfont icon-you" style="color: #CCCCCC;"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						title:"小米会员",
						icon:"icon-VIP",
						color:"#EEC211"
					},
					{
						title:"会员中心",
						icon:"icon-huangguan",
						color:"#EEC211"
					},
					{
						title:"服务中心",
						icon:"icon-xihuan",
						color:"#D52B4D"
					},
					
					{
						title:"小米之家",
						icon:"icon-home",
						color:"#FF9900"
					},
					{
						title:"更多功能",
						icon:"icon-gengduo1",
						color:"#F709C7"
					},
					{
						title:"更多设置",
						icon:"icon-icon_set_up",
						color:"#4DB361"
					}
				]
			}
		},
		methods: {
			userSet(){
				uni.navigateTo({
					url:"../user-set/user-set"
				})
			},
			realAuth(){
				console.log("---------------------------")
				uni.navigateTo({
					url:"../real-auth/real-auth"
				})
			},
			toOrder(type){
				uni.navigateTo({
					url:"../order/order?type="+type
				})
			},
			 
		}
	}
</script>

<style lang="less">
.user_top{
	height: 320rpx;
	position: relative;
	image{
		width: 100%;
		height: 320rpx;
	} 
	.user_top_icon{
		position: absolute;
		top: 74rpx;
		right: 20rpx;
		color: #FFFFFF;
		font-size: 50rpx;
		z-index: 99;
	}
	.user_info{
		width: 100%;
		position: absolute;
		bottom: 20rpx;
		left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.heard_image{
			width: 145rpx;
			height: 145rpx;
			border-radius: 100%;
			border: 5rpx solid #FFFFFF;
		}
		.nick_name{
			font-size: 30rpx;
			font-weight: 700;
			margin-left: 20rpx;
			color: #FFFFFF;
		}
		.jifen{
			height: 70rpx;
			padding: 0rpx 40rpx;
			background-color: #F0AD4E;
			color: #FFFFFF;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top-left-radius: 40rpx;
			border-bottom-left-radius: 40rpx;
			align-self: flex-end;
		}
	}
}
// 订单状态筛选
.order_status_tab{
	padding: 20rpx 0rpx;
	display: flex;
	align-items: center;
	.order_status{
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		.iconfont{
			line-height: 1;
		}
	}
}

// 中间列表操作条

.list-item{
	padding: 20rpx 20rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #F1F1F1;
	.iconfont{
		padding-right: 20rpx;
	}
}
</style>
